<template>
  <!-- 中间为3D地图 -->
  <div class="three-map-box">
    <div @click="substationOverview"
         style="cursor: pointer;">中间为3D地图</div>
    <!-- 1.1  3D地图的图例 -->
    <div class="threed-map-legend colbetweenbox">
      <div class="item">
        <span></span>
        <span>巡检任务</span>
      </div>
      <div class="item">
        <span></span>
        <span>巡检报告</span>
      </div>
      <div class="item">
        <span></span>
        <span>异常巡检点</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class extends Vue {
  public substationOverview(): void {
    //   电子电图获取参数
    let val = { name: "地图参数" };
    this.$router.push({
      path: "substationoverview",
      query: { name: val.name },
    });
  }
}
</script>

<style lang="scss" scoped>
.three-map-box {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.24rem;
  .threed-map-legend {
    width: 1.4rem;
    height: 1rem;
    position: absolute;
    right: 25%;
    bottom: 0.24rem;
    z-index: 3;
    .item {
      height: 0.2rem;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      span:first-child {
        display: inline-block;
        height: 0.2rem;
        width: 0.2rem;
        background: url("../../../../assets/img/JointInspection/map_task_icon.png")
          no-repeat center center;
        background-size: 100% 100%;
      }
      span:last-child {
        font-size: 18px;
        margin-left: 0.12rem;
      }
    }
    .item:nth-child(2) {
      span:first-child {
        background: url("../../../../assets/img/JointInspection/map_report_icon.png")
          no-repeat center center;
        background-size: 100% 100%;
      }
    }
    .item:nth-child(3) {
      span:first-child {
        background: url("../../../../assets/img/JointInspection/map_abrplace_icon.png")
          no-repeat center center;
        background-size: 100% 100%;
      }
    }
  }
}
</style>

